<template>
    <div>
        <el-button

                size="mini"
                type="success"
                @click="dialogVisible01 = true">添加
        </el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="部门编号"
               >
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="部门名称"
               >
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>部门名称: {{ scope.row.name }}</p>
                    <p>所在位置: {{ scope.row.address }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                label="部门地址"
                >
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>这里是: {{ scope.row.address }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.address }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.row),dialogVisible = true">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除
                </el-button>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
        <el-dialog
                title="部门信息修改"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="部门编号" prop="age">
                    <el-input v-model="ruleForm.id"></el-input>
                </el-form-item>
                <el-form-item label="部门地址" prop="age">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="age">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog
                title="添加部门信息"
                :visible.sync="dialogVisible01"
                width="30%"
                :before-close="handleClose">
            <el-form :model="ruleForm01" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="部门编号" prop="age">
                    <el-input v-model="ruleForm01.id"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="age">
                    <el-input v-model="ruleForm01.name"></el-input>
                </el-form-item>
                <el-form-item label="部门地址" prop="age">
                    <el-input v-model="ruleForm01.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm01(ruleForm01)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>



<script>
    export default {
        name: "Student",

        data() {
            return {
                tableData:[],
                currentPage: 1,
                pageSize: 5,
                total:0,
                dialogVisible: false,
                dialogVisible01: false,
                ruleForm: {},
                ruleForm01:{},

            }
        },

        created() {
            this.iniTable()
        },

        methods: {
            //初始化页面，展示出所有信息
            iniTable(){
               this.$axios.get("http://localhost:8081/dept/selectAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{

                   this.total=resp.data.data.total;
                    this.tableData=resp.data.data.records;

                })
            },
            // 当点击一页几条数据时得到这个值，然后初始化页面让其查找到此页面数据
            handleSizeChange(val) {
                this.pageSize=val;
                this.iniTable();
            },
            // 当点击第几页时得到此值，然后初始化页面让其查找到此页面数据
            handleCurrentChange(val) {
               this.currentPage=val;
               this.iniTable();
            },

            handleEdit(row) {
                this.ruleForm=row;

            },
            // 删除一条数据，将这行数据传进来，得到id去删除数据
            handleDelete(row) {
                this.$axios.get("http://localhost:8081/dept/delete?id="+row.id).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("删除信息成功")
                        this.iniTable();
                    }else {
                        this.$message.error("删除信息失败")
                    }


                })
            },
            // 当点击提交时得到这行数据，并发送请求去修改数据
            submitForm(ruleForm) {
                this.$axios.post("http://localhost:8081/dept/update",ruleForm).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("修改信息成功")
                        this.dialogVisible=false;
                        this.iniTable();
                    }else {
                        this.$message.error("修改信息失败")
                    }


                })
            },
            //当点击提交时得到这行数据，并发送请求去修改数据
            submitForm01(ruleForm01) {
                this.$axios.post("http://localhost:8081/dept/insert",ruleForm01).then(resp=>{
                    if(resp.data.code===200){
                        this.$message.success("添加信息成功")
                        this.dialogVisible01=false;
                        this.iniTable();
                    }else {
                        this.$message.error("添加信息失败")
                    }

                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

        }

    }
</script>

<style scoped>

</style>